@color:#fcac45;
@bg:#000000;
// 添加页面点击平滑效果
body,html{
    scroll-behavior: smooth;
}
// 导航
.header{
    background-color: @bg;
    .navbar-default .navbar-brand{
        text-transform: uppercase;
        color: #ffffff;
        &:hover{
            color: #ffffff;
        }
    }
    .navbar-default{
        background-color: @bg;
        border: none;
    }
    .navbar-default .navbar-nav>li>a{
        // 将字母小写转化为大写
        text-transform: uppercase;
        color: #ffffff;
        &:hover{
            border-bottom: 3px solid @color;
            color: #ffffff;
        }
    }
    
    .navbar-default .navbar-nav>.active>a{
        background-color: transparent;
        border-bottom: 3px solid @color;
        &:hover{
            background-color: transparent;
        }
    }
    
}
@media (max-width:768px){
    .header{
        .navbar-default .navbar-nav>li>a{
            text-align: center;
            &:hover{
                border: none;
                background-color: @color;
            }
        }
        .navbar-default .navbar-nav>.active>a{
            border: none;
            background-color: @color;
            &:hover{
                background-color: @color;
            }
        }
        .navbar-default .navbar-toggle{
            border: none;
            &:hover{
                background-color: @color;
            }
        }
    }
    
}


// 背景
.banner{
    width: 100%;
}


// Some words about us
.main{
    height: 610px;
    .main-right{
        margin-top: 100px;
    }
    .main-left{
        margin-top: 100px;
    }
    .main-top{
        color: #636363;
        font-size: 14px;
        text-transform: uppercase;
    }
    .main-title{
        font-size: 24px;
        text-transform: uppercase;
        span{
            &:nth-child(1){
                border-bottom:3px solid @color;
            }
            &:nth-child(3){
                font-weight: bold;
            }
        }
    }
    .main-font{
        font-size: 14px;
        color: #6c6c6c;
        margin-top: 30px;
    }
    .main-list{
        margin-top: 30px;
        ul li{
            font-size: 14px;
            color: #5a5a5a;
            line-height: 22px;
        }
    }
    .main-btn{
        width: 194px;
        height: 47px;
        border: 1px solid #7f7f7f;
        margin-top: 50px;
        border-radius: 3px;
        line-height: 47px;
        text-transform: uppercase;
        color: #616161;
        font-size: 12px;
        transition: all .6s;
        span{
            &:nth-child(1){
                margin-left: 22px;
            }
        }
        &:hover{
            box-shadow: 5px 5px 20px black;
            transform: translateY(-15px);
        }
        
    }
    
}
@media (max-width:992px){
    .main-left{
        display: none;
    }
    .main-top,.main-title,.main-font,.main-list{
        text-align: center;
    }
    .main-btn{
        margin: 30px auto;
    }
    .main{
        height: 100%;
    }
    
}

@media (min-width:992px){
    .main-right{
        margin-left: 100px;
    }
}

@media (max-width:1200px){
    .main-left img{
        width: 100%;
    }
}
// Meet our team
.menu{
    height: 726px;
    background-color:#070707;
    .menu-box{
        margin-top: 92px;
    }
    .menu-title{
        display: flex;
        justify-content: center;
        margin-top: 100px;
        font-size: 31px;
        color: #ffffff;
        text-transform: uppercase;
        div{
            &:nth-child(2){
                font-weight: bold;
            }
        }
    }
    .menu-img{
        
        img{
            width: 127px;
            height: 127px;
            border-radius: 100%;
            transition: all .6s;
            &:hover{
                box-shadow: 1px 1px 20px #ffffff;
                transform: translateY(-15px) rotate(360deg);
            }
        }
    } 
    .menu-font{
        color: #ffffff;
        text-align: center;
        div{
            &:nth-child(1){
                font-size: 16px;
                margin-top: 23px;
            }
            &:nth-child(2){
                font-size: 13px;
            }
        }
    }
    .menu-list{
        margin-top: 25px;
        ul li{
            text-align: center;
            color: #ffffff;
            line-height: 23px;
        }
    }
}
.swiper{
    height: 538px;
    .swiper-pagination-bullet{
    width: 9px;
    height: 9px;
    border-radius: 0;
    background-color: #ffffff;
}

}


@media (max-width:992px){
    .menu{
        height: 100%;
    }
    .swiper{
        height: 100%;
    }
    .menu .menu-box{
        margin: 30px auto;
    }
}

// take a look at our services 
 .submenu{
     height: 736px;
     .submenu-title{
         font-size: 31px;
         text-align: center;
         text-transform: uppercase;
         margin-top: 100px;
     }
     .submenu-img{
         img{
             transition: all .6s;
             &:hover{
                 transform: translateY(-15px) rotate(360deg);
             }
         }
     }
     .submenu-font{
         text-align: center;
         font-size: 14px;
         color: #6c6c6c;
         margin-top: 40px;
         div{
             line-height: 25px;
         }
     }
     .submenu-box{
         margin-top: 128px;
        .submenu-headline{
            text-align: center;
            font-size: 18px;
            text-transform: uppercase;
            margin-top: 20px;
        }
        .submenu-list{
            text-align: center;
            margin-top: 15px;
        }
     }
     
 }

 @media (max-width:992px){
     .submenu{
         height: 100%;
     }
     .submenu .submenu-box{
        margin: 30px auto;
     }
 }

 @media (max-width:320px){
     .menu-img img{
         width: 80%;
     }
    
 }

//  take a look at our work
.picture{
    height: 1334px;
    .picture-title{
        font-size: 31px;
        text-align: center;
        text-transform: uppercase;
        margin-top: 100px;
    }
    .picture-font{
        text-align: center;
        margin-top: 43px;
        color: #6c6c6c;
    }
    .picture-nav{
        display: flex;
        justify-content: space-between;
        margin-top: 115px;
        .picture-navleft{
            text-transform: uppercase;
            font-weight: bold;
        }
        .picture-navright{
            ul{
                display: flex;
                li{
                    color: #787878;
                    margin-left: 10px;
                    &:nth-child(1){
                        font-weight: bold;
                    }
                }
            }
        }
    }
    .picture-box{
        margin: 8px auto;
        .work{
            position: relative;
            .work-bg{
                font-size: 1px;
                width: 100%;
                height: 100%;
                background-color: #222222;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                transition: all 0.6s;
                div{
                    &:nth-child(1){
                        font-size: 18px;
                        color: #ffffff;
                        text-transform: uppercase;
                        margin-top: 4.1875rem;
                        text-align: center;
                    }
                    &:nth-child(2){
                        color: #b2b2b2;
                        text-align: center;
                    }
                    &:nth-child(3){
                        width: 40px;
                        height: 40px;
                        border: 3px solid @color;
                        margin: 30px auto;
                        border-radius: 100%;
                        color: @color;
                        text-align: center;
                        font-size: 22px;
                        line-height: 38px;
                    }
                }
                &:hover{
                    opacity: 1;
                    transform: rotate(360deg);
                }
            }
        }
    }
}
@media (max-width:768px){
    .picture .picture-nav{
        display: inline-block;
    }
    .picture-navleft{
        margin-left: 8px;
        line-height: 35px;
    }
    .picture .picture-nav .picture-navright ul li{
        &:nth-child(1){
            margin-left: 8px;
            
        }
    }
}
@media (max-width:1200px){
    .work-img img{
        width: 100%;
    }
}
@media (max-width:992px){
    .picture{
        height: 100%;
    }
        
}

// feel free to contact us
.menu-form{
    height: 835px;
    .form-title{
        margin-top: 100px;
        font-size: 31px;
        text-align: center;
        text-transform: uppercase;
    }
    .menu-top{
        color: #6c6c6c;
        text-align: center;
        margin-top: 43px;
    }
    .input{
        width: 100%;
        height: 40px;
        margin: 0 auto;
        transition: all .6s;
        &:hover{
            transform: translateY(-10px);
            box-shadow: 1px 1px 20px #6c6c6c;
        }
    }
    .text{
        width: 100%;
        height: 163px;
        margin: 0 auto;
        transition: all .6s;
        &:hover{
            transform: translateY(-10px);
            box-shadow: 1px 1px 20px #6c6c6c;
        }
    }
    .form-left, .form-right{
        margin-top: 90px;
        span{
            color: #636363;
            &:nth-child(2){
                color: red;
            }
        }
        
    }
    .form-bottom{
        margin-top: 30px;
        span{
            color: #636363;
            &:nth-child(2){
                color: red;
            }
        }
    }
    .form-btn{
        width: 165px;
        height: 40px;
        background-color: @color;
        clear: both;
        float: right;
        text-align: center;
        color: #ffffff;
        line-height: 40px;
        margin-right: 12px;
        margin-top: 30px;
    }
}

@media (max-width:768px){
    .menu-form{
        .form-left, .form-right{
            margin-top: 10px;
        }
        .form-bottom{
            margin: 10px;
        }
    }
    
}

// 底部
.footer{
    height: 92px;
    background-color: #070707;
    .footer-left{
        color: #b2b2b2;
    }
    .footer-right{
        display: flex;
        div{
            margin-left: 13px;
        }
    }
}
@media (min-width:992px){
    .footer{
        display: flex;
        justify-content: space-around;
    }
    .footer-left{
        line-height: 92px;
    }
    .footer-right{
        line-height: 92px;
    }
}
@media (max-width:992px){
    .footer{
        height: 100%;
    }
    .footer-left{
        text-align: center;
        padding-top: 15px;
    }
    .footer-right{
        display: flex;
        justify-content: center;
        padding: 20px;
    }
}





